<template>
	<view id="main">
		<view class="sidebar">
			<view class="sidebar-item flex-column-around" :style="activeKey==0?'background-color:#ffffff':''" @click="onClickSidebarItem(0)">类别一</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==1?'background-color:#ffffff':''" @click="onClickSidebarItem(1)">类别二</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==2?'background-color:#ffffff':''" @click="onClickSidebarItem(2)">类别三</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==3?'background-color:#ffffff':''" @click="onClickSidebarItem(3)">类别一</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==4?'background-color:#ffffff':''" @click="onClickSidebarItem(4)">类别二</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==5?'background-color:#ffffff':''" @click="onClickSidebarItem(5)">类别三</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==6?'background-color:#ffffff':''" @click="onClickSidebarItem(6)">类别一</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==7?'background-color:#ffffff':''" @click="onClickSidebarItem(7)">类别二</view>
			<view class="sidebar-item flex-column-around" :style="activeKey==8?'background-color:#ffffff':''" @click="onClickSidebarItem(8)">类别三</view>
		</view>
		<view style="float: left;width: 550upx;">
			<scroll-view scroll-y="true" style="height: 100vh;width: 100%;" :scroll-into-view="'start'+activeKey" scroll-with-animation="true">
				<view class="item flex-between" id="start0" @click="goTo('/pages/goodsInfo/index?type=normal')">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start1">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start2">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start3">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start4">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start5">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start6">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start7">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
				<view class="item flex-between" id="start8">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-around item-info">
						<label class="item-info-title">海底捞正宗火锅底料</label>
						<label>500g/袋 特辣</label>
						<view class="flex-between" style="width: 100%;">
							<label>商品品牌</label>
							<label class="item-info-price">￥120.00</label>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				activeKey:0
			}
		},
		onLoad(){
			
		},
		methods:{
			//点击标签
			onClickSidebarItem(index){
				const that=this;
				that.activeKey=index;
				console.log(that.activeKey);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sidebar{
		width: 200upx;
		height: 100vh;
		background-color: #F7F7F7;
		float: left;
		overflow: auto;
	}
	.sidebar-item{
		width: 200upx;
		height: 80upx;
		font-size: 28upx;
		font-weight: 500;
		color: #666666;
		align-items: center;
	}
	.item{
		height: 180upx;
		padding-top: 40upx;
		padding-bottom: 20upx;
		padding-left: 30upx;
		padding-right: 30upx;
		image{
			width: 180upx;
			height: 180upx;
		}
		.item-info{
			font-size: 24upx;
			font-weight: 500;
			color: #666666;
			height: 180upx;
			.item-info-title{
				width: 100%;
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item-info-price{
				font-size: 32upx;
				font-weight: bold;
				color: #FF5353;
			}
		}
	}
</style>
